<template>
  <div class="deferContainer">
    <div class="deferTop">
      <div class="back" @click="router.go(-1)">
        <img src="@/assets/back.png" alt="">
      </div>
      <div class="pageName">
        Cần gia hạn
      </div>
      <div class="customer"></div>
    </div>
    <div class="tip">
      <img src="@/assets/tipIcon2.png" alt="">
      <p class="tipContent">
        lưu ý : không thanh toán cho bất cứ tài khoản cá nhân nào
      </p>
    </div>
    <div class="contentWapper">
      <div class="moneyArea">
        <div class="moneyTitle">
          Số tiền cần thanh toán
        </div>
        <div class="money">{{ Number(deferInfo.repayRecordSet.miscFeeCollect).toLocaleString() }}</div>
      </div>
      <div class="deferDetailArea">
        <div class="deferDetailContent" @click="changeDialogHandler(true)">
          <p class="deferName">Chi tiết thanh toán</p>
          <img src="@/assets/jiantou_right.png" alt="">
        </div>
      </div>
      <div class="tipAndOverView">
        <p class="deferTip">Khi phí trả chậm được thanh toán thành công, khoản vay hiện tại của bạn sẽ được thanh toán
          và
          khoản vay mới sẽ được tạo. Bạn sẽ cần phải hoàn trả khoản vay mới vào một ngày mới.</p>
        <div class="deferOverView">
          <p class="overViewTitle">
            Chi tiết thanh toán
          </p>
          <div class="overViewContent">
            <div class="overViewItem">
              <p class="itemName">Kỳ hạn</p>
              <p class="itemValue">{{ deferInfo.repayRecordSet.loanTenure }} ngày</p>
            </div>
            <div class="overViewItem">
              <p class="itemName">Ngày cần thanh toán</p>
              <p class="itemValue">{{ deferInfo.repayRecordSet.repayDate }}</p>
            </div>
            <div class="overViewItem">
              <p class="itemName">Số tiền cần thanh toán</p>
              <p class="itemValue">{{ Number(deferInfo.repayRecordSet.repayAmt).toLocaleString() }}₫</p>
            </div>
          </div>
        </div>

        <div class="btn" @click="applyForDeferHandler">
          Thanh toán ngay lập tức
        </div>
      </div>

    </div>

    <OrderDetailDialog :showDialog="showDialog" @changeDialogHandler="changeDialogHandler" :deferInfo="deferInfo" />
  </div>
</template>

<script setup lang='ts'>
import api, { type DeferInfoModel } from '@/api';
import { getItem } from '@/utils/token-utils';
import { Toast } from 'tdesign-mobile-vue';
import { onMounted, ref } from 'vue';
import OrderDetailDialog from '@/components/orderDetailDialog.vue'
import { useRoute, useRouter } from 'vue-router';

let showDialog = ref(false)

let route = useRoute()
let router = useRouter()


let orderId = ref(route.query.OrderIdOfHome)

let deferInfo = ref<DeferInfoModel>({
  "repayRecordSet": {
    "miscFeeCollect": '',
    "loanTenure": '',
    "repayAmt": '',
    "repayDate": ''
  },
  "computedSet": {
    "handlingFee": '',
    "delayedFee": '',
    "creditPaymentDue": '',
    "rolloverCharge": '',
    "financeCharge": '',
    "salesTax": ''
  }

})
const deferCalculationHandler = async () => {
  try {
    let deferCalculationRes = (await api.deferCalculation({
      uuid: getItem('uuid'),
      token: getItem('token'),
      purchaseId: orderId.value

    })).data
    if (deferCalculationRes.code == '0') {
      deferInfo.value = deferCalculationRes.data
    } else {
      Toast({
        message: deferCalculationRes.message,
        duration: 3 * 1000
      })
    }

  } catch (error) {
    console.log(error);

  }
}
const changeDialogHandler = (isShow: boolean) => {
  showDialog.value = isShow
}
const applyForDeferHandler = async () => {
  try {
    let applyRes = (await api.applyForDefer({
      uuid: getItem('uuid'),
      token: getItem('token'),
      purchaseId: orderId.value
    })).data
    if (applyRes.code == '0' || applyRes.code == '12') {
      try {
        let applyRepayRes = (await api.applyToRePayMent({
          uuid: getItem('uuid'),
          token: getItem('token'),
          paymentType: applyRes.data.depositType,
          rpyMap: {
            [`${orderId.value}`]: deferInfo.value.repayRecordSet.miscFeeCollect
          },

        })).data
        if (applyRepayRes.code == '0') {
          // window.location.replace(applyRepayRes.data.redirectTo)
          router.push({
            path:'/payment',
            query:{
              linkUrl:applyRepayRes.data.redirectTo
            }
          })
        } else {
          router.replace({
            path: '/home'
          })
        }

      } catch (error) {

      }
    } else if (applyRes.code == '11') {
      Toast({
        message: applyRes.message,
        duration: 3 * 1000
      })
      router.replace({
        path: '/home'
      })
    } else {
      Toast({
        message: applyRes.message,
        duration: 3 * 1000
      })
    }

  } catch (error) {
    console.log(error);

  }
}

onMounted(() => {
  orderId.value = route.query.OrderIdOfHome
  deferCalculationHandler()
})
</script>

<style lang="less" scoped>
.deferContainer {
  height: 100%;
  background-color: #F7F7FA;
  overflow: hidden;

  .deferTop {
    min-height: 2.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .8rem;

    .back {
      width: 1.2rem;
      height: 1.2rem;

      &>img {
        width: 100%;
        height: 100%;
      }
    }

    .pageName {
      /* font-family: SF Pro, SF Pro; */
      font-weight: 600;
      font-size: .9rem;
      color: #292B33;
      line-height: 1.3rem;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .customer {
      width: 1.2rem;
      height: 1.2rem;
    }
  }

  .tip {
    background-color: #FFF7EB;
    padding: .6rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &>img {
      display: block;
      width: .8rem;
      height: .8rem;
      margin-right: .4rem;
    }

    .tipContent {
      /* font-family: SF Pro, SF Pro; */
      font-weight: 400;
      font-size: .6rem;
      color: #FF9326;
      /* line-height: 1.1rem; */
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .contentWapper {
    height: calc(100% - 2.3rem - 1.9rem);
    overflow-y: scroll;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 1rem .8rem;

    .moneyArea {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 1rem;

      .moneyTitle {
        /* font-family: SF Pro, SF Pro; */
        font-weight: 400;
        font-size: .7rem;
        color: #9599A6;
        line-height: 1.1rem;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .money {
        /* font-family: DIN Alternate, DIN Alternate; */
        font-weight: bold;
        font-size: 2rem;
        color: #292B33;
        line-height: 2.4rem;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }

    .deferDetailArea {
      background-color: #fff;
      border-radius: 8px;
      padding: .8rem;
      width: 100%;

      .deferDetailContent {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .deferName {
          font-weight: 400;
          font-size: .7rem;
          color: #626673;
          line-height: 1.1rem;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        &>img {
          display: block;
          widows: .8rem;
          height: 16px;
        }
      }
    }

    .tipAndOverView {
      background-color: #fff;
      border-radius: .4rem;
      padding: .8rem;
      margin-top: .6rem;

      .deferTip {
        background-color: #F7F7FA;
        padding: .6rem;
        margin-bottom: 1rem;
      }

      .deferOverView {
        .overViewTitle {
          font-family: SF Pro, SF Pro;
          font-weight: 600;
          font-size: .9rem;
          color: #292B33;
          line-height: 1.3rem;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-bottom: .6rem;
          text-align: center;

        }

        .overViewContent {
          .overViewItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .6rem;

            .itemName {
              font-family: SF Pro, SF Pro;
              font-weight: 400;
              font-size: .7rem;
              color: #9599A6;
              line-height: 1.1rem;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .itemValue {
              font-family: SF Pro, SF Pro;
              font-weight: 400;
              font-size: .7rem;
              color: #292B33;
              line-height: 1.1rem;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
        }


      }

      .btn {
        background: linear-gradient(94deg, #F9A848 0%, #F7941D 100%);
        border-radius: 31px 31px 31px 31px;

        font-family: SF Pro, SF Pro;
        font-weight: 600;
        font-size: .9rem;
        color: #FFFFFF;
        line-height: 1.3rem;
        text-align: center;
        font-style: normal;
        text-transform: none;

        padding: .6rem;
        margin-top: 8px;
      }
    }
  }
}
</style>